<template>
  <el-dialog
    v-if="open"
    class="dia-style"
    :title="title"
    :visible.sync="open"
    append-to-body
    width="30%"
    :close-on-click-modal="false"
    @close="cancel"
  >
    <hk-form
      ref="hkFormRef"
      :form-labels="formLabels"
      :rules="formRules"
      :data="formData"
      :btn-hidden="true"
      :dict-list="dictList"
      label-width="120"
      label-position="left"
    />
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleSubmit">确定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import HkForm from '@/components/HkForm/index.vue'
export default {
  components: { HkForm },
  data() {
    return {
      open: false,
      title: '选择驳回节点',
      formLabels: [
        {
          label: '驳回目标节点',
          field: 'targetNodeId',
          type: 'select',
          list: 'nameLists',
          span: 24,
          class: 'showUser',
          attrs: {
            placeholder: '请选择驳回目标节点'
          }
        }
      ],
      dictList: {
        nameLists: []
      },
      formRules: {
        targetNodeId: [{ required: true, message: '请选择驳回节点', trigger: 'change' }]
      },
      formData: {}
    }
  },
  methods: {
    show(title, res, taskKey) {
      this.open = true
      this.title = title
      this.setFormLabels(res)
    },
    cancel() {
      this.open = false
      this.formData = {}
      this.$emit('handleCancel')
    },
    handleSubmit() {
      this.$refs.hkFormRef.handleFormSubmit('formLabels').then((valid) => {
        if (valid) {
          this.$emit('handleSubmit', this.formData)
          this.open = false
          this.formData = {}
        } else {
          this.$message.error('请选择驳回节点')
        }
      })
    },
    //  设置表单显示项
    setFormLabels(res) {
      if (res.length > 0) {
        this.dictList.nameLists = res.map((i) => {
          return { label: i.label, value: i.id }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  padding: 20px 20px;
  font-weight: bold;
  i {
    font-size: 18px;
    color: #fa541c;
  }
}
.btn {
  text-align: right;
  padding-top: 20px;
}
</style>
